<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>这是Element对象</div>  <!--element-->

  <input type="text">



  <script>
    // Element => Node => EventTarget
    const divEl = document.querySelector("div")

    const handleClick = evt => {
      evt.stopPropagation()   // 停止冒泡
      //
      console.log(evt)
    }

    divEl.onclick = handleClick

    //divEl.onclick = null

    console.dir(divEl)

    // 元素被点击了, 浏览器构建了一个Event对象, [用元素的onclick属性的函数调]并把Event对象传给它


    // preventDefault
    const inputEl = document.querySelector("input")

    inputEl.onkeypress = evt => {
      evt.preventDefault()
      console.log(evt)
    }

  </script>
</body>
</html>
